@import "./variables";
@import "~bootstrap/scss/bootstrap";
@import "./buttons";

$colors: #444, $primary, #1b5e20, #880e4f, #827717, #212121, #4e342e, #37474f;

@mixin datasource($color: $primary) {
  #header-main {
    background: linear-gradient(
      lighten($color, 2.5%) 0%,
      lighten($color, 12.5%) 100%
    );
    &.engine_hive {
      background-image: linear-gradient(
        -45deg,
        lighten($color, 6%) 25%,
        lighten($color, 8%) 25%,
        lighten($color, 8%) 50%,
        lighten($color, 6%) 50%,
        lighten($color, 6%) 75%,
        lighten($color, 8%) 75%,
        lighten($color, 8%)
      );
      background-size: 1rem 1rem;
    }
    .btn:not(.btn-secondary) {
      background-color: darken($color, 5%);
    }
  }
}

@each $color in $colors {
  $key: index($colors, $color) - 1;
  .datasource_#{$key} {
    #header {
      @include datasource($color);
    }
  }
  .datasource_#{$key}-color {
    color: $color !important;
  }
  .datasource_#{$key}-bgcolor {
    background-color: lighten($color, 10%) !important;
  }
}

#logo {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0;
  a {
    color: $white;
    text-decoration: none;
  }
  #logo-figure {
    display: inline-block;
    vertical-align: middle;
    width: 1.2rem;
    height: 1.6rem;
    background: url(../yanagishima.svg) 0 no-repeat;
    background-size: contain;
  }
}

#page {
  #wrapper {
    position: relative;
    #sub {
      margin-left: -300px;
      width: 300px;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      overflow-y: scroll;
    }
    &.open {
      #main {
        position: relative;
        transition: margin 0.3s linear;
        margin-left: 300px;
      }
      #sub {
        transition: margin 0.15s linear;
        margin-left: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -webki-tbox-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
      #header-setting .close {
        margin-left: 0;
      }
    }
  }
}

#header-setting {
  width: 100%;
  padding: 1rem;
  background: lighten($black, 10%);
  border-bottom: 1px solid $gray-500;
  color: $white;
  .card {
    background: lighten($black, 20%);
    border: lighten($black, 10%);
    color: rgba(255, 255, 255, 0.65);
    .card-header {
      color: #fff;
      background-color: #333;
      border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
      height: 40px;
    }
  }
  .close {
    margin-left: 10px;
  }
  .list-unstyled {
    label {
      @include text-truncate;
      width: 96%;
      margin-bottom: 0.25rem;
    }
    li {
      &:last-child label {
        margin-bottom: 0;
      }
    }
  }
  .btn {
    min-width: 1.6rem;
    background: rgba($white, 0.5);
    color: lighten($black, 10%);
    padding: 0.2rem 0.4rem;
    &:hover {
      color: $white;
    }
    &.selected {
      color: $black;
      background: $white;
    }
  }
}
#header {
  #header-main {
    color: $white;
  }
  #header-sub {
    background: $gray-100;
    padding-bottom: 1rem;
  }
  .nav-tabs {
    border-bottom: 0;
  }
  .nav-link {
    border-width: 0;
    color: #eee;
    &:hover,
    &:focus {
      color: $white;
    }
    &.active {
      color: $black;
    }
  }
}

#content {
  min-height: 640px;
  background: $body-bg url(../yanagishima.svg) 50% 65% no-repeat;
  background-size: 320px;
  background-attachment: fixed;
  position: relative;
  &.open {
    padding-bottom: 35vh;
  }
  .header {
    background: $gray-100;
    padding-bottom: 1rem;
  }
}

#btn-panel {
  position: fixed;
  top: 0.5rem;
  left: -2px;
}

#panel {
  border-left: 1px solid $gray-200;
  width: calc(100% - 300px);
  position: fixed;
  bottom: 0;
  z-index: 5;
  background: rgba($white, 0.9);
  height: 35vh;
  overflow-y: scroll;
  #panel-header {
    height: 0.3rem;
    margin-bottom: 1rem;
  }
}

#comment {
  position: fixed;
  bottom: -0.5rem;
  right: 0.5rem;
  z-index: 2;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
  width: 600px;
  #comment-body {
    min-height: 8rem * $line-height-base;
    max-height: 32rem * $line-height-base;
    overflow-y: scroll;
  }
  textarea {
    line-height: $line-height-base;
  }
  pre {
    padding: $input-padding-y $input-padding-x;
    font-size: 0.8rem;
    font-family: $font-family-sans-serif;
  }
  &.conpact {
    box-shadow: none;
    bottom: -1px;
    width: auto;
    .card-body {
      display: none;
    }
  }
}
.comment {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}

#treeview {
  .list-group {
    max-height: 345px;
    overflow-y: scroll;
    .list-group-item {
      flex: none;
      text-decoration: none;
    }
  }
  .nav-link-sm {
    padding: .3rem 1rem;
  }
  .form-filter {
    border-bottom: 1px solid $gray-500;
    width: 50px;
  }
  .form-filter-input {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    outline: 0;
    color: $gray-700;
    font-size: 0.75rem;
    &:focus {
    }
  }
  #columns {
    border: $card-border-width solid $card-border-color;
    border-radius: $card-border-radius;
    th {
      border: 0;
      padding: $card-spacer-y $card-spacer-x;
      &:first-child {
        width: 35%;
      }
    }
    td {
      padding: $list-group-item-padding-y $list-group-item-padding-x;
      line-height: 1.6
    }
  }
}
#partition {
  .card {
    background: $gray-200;
  }
  .list-group,
  .card-block {
    height: 500px;
    overflow-y: scroll;
    .list-group-item {
      flex: none;
    }
  }
  .form-filter {
    border-bottom: 1px solid $gray-500;
  }
  .form-filter-input {
    border: 0;
    padding: 0;
    background: transparent;
    outline: 0;
    color: $gray-700;
    font-size: 0.75rem;
  }
  @include media-breakpoint-up(sm) {
    .modal-dialog {
      max-width: $modal-lg;
    }
  }
}

#explain {
  background: $black;
  color: $white;
  padding: 0.5rem;
}

#error {
  background: $primary;
  color: $white;
  height: 100%;
  #logo {
    position: absolute;
    top: 15px;
    left: 15px;
  }
  #box {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    font-size: 128px;
  }
}

.editor {
  border-radius: $border-radius;
  border: 1px solid #ccc;
  background: $white;
  .auto-complate {
    font-style: italic;
  }
  position: relative;
}

.table {
  &.table-auto {
    width: auto;
    max-width: auto;
  }
  &.table-fixed {
    table-layout: fixed;
    th,
    td {
      @include text-truncate;
      vertical-align: middle;
    }
    tr.vertical-top {
      th,
      td {
        vertical-align: top;
      }
    }
    .td-hover {
      position: relative;
    }
    .td-hover:hover .set {
      display: inline-block;
    }
  }
  thead {
    background: darken($gray-200, 5%);
  }
  tbody {
    background-color: $white;
  }
  tfoot {
    background: $white;
  }
}

.card-header + .list-group {
  margin-top: -1px;
}

.modal-body {
  background: $gray-100;
}

.btn.clip,
.btn.panel,
.btn.set {
  position: absolute;
  margin-top: -0.1rem;
  right: 0.4rem;
  display: none;
  z-index: 10;
}

.list-group-item:hover .btn.clip,
.list-group-item:hover .btn.panel,
.list-group-item:hover .btn.set {
  display: inline-block;
}

.table-base {
  color: $link-color !important;
}

.table-view {
  color: $success !important;
}

.mfp-iframe-holder {
  padding-top: 0;
  padding-bottom: 0;
}

.mfp-iframe-holder .mfp-content {
  height: 90%;
  max-width: 1280px;
}

.clone {
  position: fixed;
  color: $white;
  text-shadow: 1px 1px 1px #000;
  padding: 0.5rem;
  background: $black;
  z-index: 15;
}

.pointer {
  cursor: pointer;
}

.bg-transparent {
  background: transparent !important;
}

#variables {
  border-radius: 4px;
  border: 1px solid $white;
  padding: 0.75rem 1rem;
  padding-top: 0.4rem;
  legend {
    font-size: 0.8rem;
    margin: 0;
    width: auto;
    padding: 0 0.6rem;
  }
  label {
    font-weight: bold;
  }
}

.ace-font {
  font: 12px / normal "Monaco", "Menlo", "Ubuntu Mono", "Consolas",
    "source-code-pro", monospace;
}

.ace_editor.ace_autocomplete {
  width: 640px;
}

.ace_tooltip {
  font-family: $font-family-sans-serif;
  padding: 0.2rem 0.5rem;
  background: theme-color-level("danger", $alert-bg-level);
  border: theme-color-level("danger", $alert-border-level) 1px solid;
  color: theme-color-level("danger", $alert-color-level);
  font-size: 12px;
}

body.konami {
  transform: scale(-1, 1);
}

.mfp-iframe-scaler iframe {
  background: #fff;
}

.column-table-tooltip {
  text-align: left;
  color: #fff;
  margin-bottom: 0;
  white-space: pre-wrap;
}
@include media-breakpoint-up(lg) {
  #treeview {
    #columns th:first-child {
      width: 30%;
    }
  }
}
@include media-breakpoint-down(md) {
  .md-none {
    display: none;
  }
}
